<template>
  <div class="topo c-shadow">
    <div id="graph2" class="graph2"></div>
    <div class="loading" v-if="loading">
      <img src="../../assets/images/chart-loading.png" alt>
      <p>企业关联图谱加载中...</p>
    </div>
  </div>
</template>

<script>
import { entdetail as api } from "../../api"
import JusTree from "../../assets/js/jus_tree"
import JusTree3 from "../../assets/js/jus_tree3"
export default {
  data() {
    return {
      loading:true,
      entname:'',
      flag: '',
      riskLabel: ''
    }
  },
  methods:{
    initChart() {
      let params = { entName: this.entname }
      api.getRelationChart(params).then(ret => {
        if (ret.data && ret.data.chartJson) {
          let chartData = JSON.parse(ret.data.chartJson)
          let chartWrap = document.querySelector('#graph2')
          chartWrap.innerHTML = ''
          this.flag = chartData.data.name
          this.loading = false
          this.riskLabel = chartData.riskCount
          var jusTree = new JusTree({
            id: '#graph2',
            data: chartData.data,
            colors: [
              '#fe0000',
              '#ff9400',
              '#f6dd0e',
              '#00d7fe',
              '#005ed2',
              '#b33ee3',
              '#f320b0'
            ]
          })
          jusTree.init()
        }
      })
    },
    madenewData() {
      let params = {
        entName:'天津中环电子信息集团有限公司'
      }
      api.gettianyanEntNewLocal(params).then(ret => {
        if (ret.data) {
          this.flag = this.entname
          this.loading = true
          let count = ret.data.riskCount
          let data = ret.data
          let nodelist = data.nodes
          let relationlist = data.relationships
          let nodes = []
          let main = {
            name:params.entName,
            id:''
          }
          nodelist.map(item => {
            nodes.push({
              id:item.id,
              name:item.properties.name,
              ntype:item.properties.isRisk === 'true' && item.labels[0] === 'Company'?'Risk':item.labels[0],
              list:{}
            })
            if (item.properties.name === main.name) {
              main.id = item.id
            }
          })
          let relations = []
          relationlist.map(item => {
            relations.push({
              id:item.id,
              startNode:item.startNode,
              endNode:item.endNode,
              type:item.type,
              label:item.properties.labels[0]
            })
          })
          nodes.map(node => {
            relations.map(link => {
              if (node.id === link.startNode) {
                node.list[link.endNode] = link.endNode
              }
              if (node.id === link.endNode) {
                node.list[link.startNode] = link.startNode
              }
            })
          })
          let jsonData = {
            nodes,
            relations,
            main
          }
          this.riskLabel = count
          this.loading = false
          var jusTree3 = new JusTree3({
            divId: "#graph2",
            width:document.querySelector("#graph2").offsetWidth,
            data: jsonData,
            height: document.querySelector("#graph2").offsetHeight
          })
          jusTree3.init()
        } else {
          this.flag = false
          this.loading = false
          this.riskLabel = 0
        }
      }).catch(err => {
        console.log(err)
      })
    }
  },
  mounted() {
    this.entname = this.$route.query.name
    this.initChart()
    // this.madenewData()
  }
}
</script>

<style lang="scss" scoped>
html{
  position: relative;
  width: 100%;
  height: 100%;
  .topo{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    .graph2 {
      width: 1840px;
      min-width:1360px;
      height: 100%;
      border: 1px solid #eee;
      border-radius: 5px;
      background: #fff;
    }
    .loading {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      position: absolute;
      height: 100%;
      background: #fff;
      z-index: 1;
      img {
        width: 100px;
        height: 100px;
        margin-bottom: 20px;
        animation: rotateself 0.5s linear infinite;
      }
      p {
        display: block;
      }
    }
    @keyframes rotateself {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
  }
}

</style>



// WEBPACK FOOTER //
// src/view/entDetail/topo.vue